<template>
  <button disabled class="a-button a-button-primary is-border is-round">默认按钮</button>
</template>

<script>
export default {
  name:'AButton',
  data () {
    return {
      
    }
  }
}
</script>

<style lang="less"  scoped>
  body{
    padding:0;
    margin:0;
  }
  // 基础按钮设置
  .a-button{
    padding:0 20px;
    border-width: 1px;
    border-style: solid;
    border-color:#dcdfe6;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    color:#606266;
    height:40px;
  }
  // 按钮颜色
  .a-button-primary{
    background-color: #409eff;
    border-color: #409eff;
    color:#fff;
    // 合并两个class,加边框，背景色变为透明
    &.is-border{
      background-color: transparent;
      color:#409eff;
    }
  }
  .a-button-success{
    background-color: #00d100;
    border-color: #00d100;
    color:#fff;
     &.is-border{
      background-color: transparent;
      color:#00d100;
    }
  }
  .a-button-warning{
    background-color: #e6a23c;
    border-color: #e6a23c;
    color:#fff;
    &.is-border{
      background-color: transparent;
      color:#e6a23c;
    }
  }
  .a-button-danger{
    background-color: #f56c6c;
    border-color: #f56c6c;
    color:#f56c6c;
    &.is-border{
      background-color: transparent;
      color:#00d100;
    }
  }
  // 圆角
  .is-round{
    border-radius: 100px;
  }
  // 透明度
  .a-button[disabled]{
    opacity: 0.5;
    cursor:not-allowed
  }
</style>
